<template>
	<div>
		<div class="echart" :id="id" :style="{width: '100%', height: '360px'}">
		</div>
	</div>


</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: ['id','day', 'series'],
		watch: {
			day: {
				handler() {
					this.updateChart()
				},

			}
		},
		data() {
			return {
				lineChart: null,
				sidebarElm: null
			}
		},
		computed: {
			...mapState({
				width: state => state.app.width,
			}),
		},
		methods: {
			updateChart() {
				var option = {
					title: {
						text: "xxx",
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						orient: 'vertical',
						right: '5px'
					},
					grid: {
						top: '40px',
						left: '3%',
						right: '8%',
						bottom: '11%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.day
					},
					yAxis: {
						// type: 'value'
					},
					series: this.series
				};
				this.lineChart.setOption(option);
			},
			resize() {
				this.lineChart.resize()
			},
			addResize() {
				this.resize()
				if (this.width == 80) {
					this.sidebarElm = document.getElementsByClassName('ant-layout-sider-children')[0]
					this.sidebarElm && this.sidebarElm.addEventListener("transitionend", this.resize)
				}else{
					this.sidebarElm && this.sidebarElm.removeEventListener("transitionend", this.resize)
				}
			},
			initChart() {
				this.lineChart = this.$echarts.init(document.getElementById(this.id));
				this.updateChart()
				window.addEventListener("resize",this.addResize);
			},
			
		},

	}
</script>
